<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>菜单文字动画效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul>
      <li style="--clr: #00ade1">
        <a href="#" data-text="&nbsp;Home">&nbsp;Home</a>
      </li>

      <li style="--clr: #ff6493">
        <a href="#" data-text="&nbsp;About">&nbsp;About</a>
      </li>

      <li style="--clr: #ffdd1c">
        <a href="#" data-text="&nbsp;Services">&nbsp;Services</a>
      </li>

      <li style="--clr: #00dc82">
        <a href="#" data-text="&nbsp;Team">&nbsp;Team</a>
      </li>

      <li style="--clr: #dc00d4">
        <a href="#" data-text="&nbsp;Contact">&nbsp;Contact</a>
      </li>
    </ul>
    <script>
      const text = document.querySelectorAll("ul li a");

      text.forEach((text) => {
        text.innerHTML = text.innerText
          .split("")
          .map((letters, i) => `<span>${letters}</span>`)
          .join("");

        const spn = document.querySelectorAll("ul li a span").forEach((e) => {
          const duration = Math.random() * 5;
          e.style.animationDuration = 0.25 + duration + "s";
        });
      });
    </script>
  </body>
</html>
